<template>
  <view class="flex-1 flex flex-col">
    <template v-if="settingInfo.switchCharter == 1">
      <view class="bgg">
        <view class="w-full h-full flex justify-center items-end">
          <up-tabs
            @click="clickTab"
            :current="current"
            lineHeight="2"
            :list="list1"
            lineColor="#FFFFFF"
            :inactiveStyle="{ color: '#FFFFFF', fontWeight: '700' }"
            :activeStyle="{
              color: '#FFFFFF',
              fontWeight: '700',
              fontSize: '16px',
            }"
            lineWidth="48"
            itemStyle="padding-left: 62rpx; padding-right: 62rpx; height: 45px;"
          ></up-tabs>
        </view>
      </view>
      <view class="px-5 mt-5">
        <template v-if="!current">
          <template v-if="list.length">
            <view
              class="bg-white rounded-xl px-4 py-[30rpx] mb-3"
              v-for="item in list"
              :key="item.id"
            >
              <view class="flex justify-between items-center bbb pb-3">
                <view class="flex items-center">
                  <view class="text-black text-base font-semibold">{{
                    item.plan_name
                  }}</view>
                  <view
                    class="w-[12rpx] h-[12rpx] rounded-full bg-[#DCE4E8] mx-2"
                  ></view>
                  <image
                    src="@/static/icon-8.png"
                    class="w-[28rpx] h-[28rpx]"
                  ></image>
                  <view class="text-black text-base font-semibold ml-[10rpx]"
                    >{{ item.sit_total }}座</view
                  >
                </view>
                <view class="flex items-center" @click="goDeatil(0, item)">
                  <view class="text-[#6C7278] text-xs ml-1">机型详情</view>
                  <image
                    src="@/static/right-1.png"
                    class="w-[28rpx] h-[28rpx]"
                  ></image>
                </view>
              </view>
              <view class="flex justify-between items-center mt-[22rpx]">
                <view class="text-[#1A1C1E] text-[40rpx] font-medium">{{
                  item.start_city
                }}</view>
                <view class="px-[43rpx] text-center flex-1">
                  <view class="text-[#1A1C1E] text-xs font-medium">{{
                    item.flight_time
                  }}</view>
                  <image
                    src="@/static/airWay.png"
                    class="w-full h-[60rpx]"
                  ></image>
                </view>
                <view class="text-[#1A1C1E] text-[40rpx] font-medium">{{
                  item.end_city
                }}</view>
              </view>
              <image
                class="w-full h-[184rpx]"
                mode="aspectFill"
                :src="item.img"
              ></image>
              <view
                class="flex justify-between items-center mt-2 ccc pb-[28rpx]"
              >
                <view class="flex items-center">
                  <image class="w-5 h-5" src="@/static/icon-6.png"></image>
                  <view class="text-[#6C7278] text-[26rpx] ml-2"
                    >可选出发日期</view
                  >
                </view>
                <view
                  class="text-[#192031] text-base"
                  v-if="item.start_date === item.end_date"
                  >{{ item.start_date }}</view
                >
                <view class="text-[#192031] text-base" v-else
                  >{{ item.start_date }}-{{ item.end_date }}</view
                >
              </view>
              <view class="flex justify-between items-center mt-4">
                <view>
                  <text class="text-theme text-[40rpx] font-medium"
                    >{{ item.price }}</text
                  ><text class="text-[#1A1C1E] text-xs font-medium pl-1"
                    >{{ item.unit }}</text
                  >
                </view>
                <view class="flex items-center">
                  <view
                    class="flex flex-col items-center"
                    @click="hanldeShare(0, item)"
                  >
                    <image
                      src="@/static/icon-7.png"
                      class="w-7 h-7 imgz mr-15"
                    ></image
                    ><text
                      class="text-[#1A1C1E] text-xs font-medium pl-1 mr-15 fontz"
                      >点击分享</text
                    >
                  </view>

                  <view
                    v-if="item.order_status == 1"
                    class="bg-[#A2A4AE] rounded-[6rpx] h-8 w-[178rpx] text-center leading-8 text-base text-white"
                    >已被预订</view
                  >
                  <view
                    v-else
                    @click="goDeatil(2, item)"
                    class="bg-theme rounded-[6rpx] h-8 w-[178rpx] text-center leading-8 text-base text-white"
                    >立即预定</view
                  >
                </view>
              </view>
            </view>
          </template>
          <view
            class="flex-1 flex justify-center items-center pt-[300rpx]"
            v-else
          >
            <up-empty
              textSize="16"
              textColor="#222222"
              text="暂无数据"
              icon="/static/empty.png"
              width="101"
              height="120"
            >
            </up-empty>
          </view>
        </template>
        <template v-else>
          <template v-if="list2.length">
            <view
              class="bg-white rounded-xl px-4 py-[30rpx] mb-3"
              v-for="item in list2"
              :key="item.id"
            >
              <view class="flex justify-between mt-[22rpx]">
                <view class="text-[#1A1C1E] text-[40rpx] font-medium">{{
                  item.start_city
                }}</view>
                <view class="px-[43rpx] text-center flex-1">
                  <image
                    src="@/static/airWay.png"
                    class="w-full"
                    mode="widthFix"
                  ></image>
                </view>
                <view class="text-[#1A1C1E] text-[40rpx] font-medium">{{
                  item.end_city
                }}</view>
              </view>
              <view class="flex justify-between items-center ccc pb-[36rpx]">
                <view>
                  <view>
                    <text class="text-[#6C7278] text-base">出发时间</text>
					<text class="text-[#1A1C1E] text-[24rpx] font-medium pl-c" v-if="item.start_date === item.end_date">{{
					  item.start_date
					}}</text>
                    <text class="text-[#1A1C1E] text-[24rpx] font-medium pl-c" v-else>{{
                      item.start_date
                    }} - {{
                      item.end_date
                    }}</text>
                  </view>
                  <view class="mt-2 flex items-center">
                    <view>
                      <text class="text-[#6C7278] text-base">座位数</text>
                      <text class="text-[#1A1C1E] text-base font-medium pl-2">{{
                        item.max_total
                      }}</text>
                    </view>
                    <view class="ml-3">
                      <text class="text-[#6C7278] text-base">余座</text>
                      <text class="text-[#1A1C1E] text-base font-medium pl-2">{{
                        item.min_total
                      }}</text>
                    </view>
                  </view>
                </view>
                <image class="w-[250rpx] h-[120rpx]" :src="item.img"></image>
              </view>

              <view class="flex justify-between items-center mt-4">
                <view>
                  <text class="text-theme text-[40rpx] font-medium"
                    >{{ item.price }}万起</text
                  ><text class="text-[#1A1C1E] text-xs font-medium pl-1"
                    >人民币</text
                  >
                </view>
                <view class="flex items-center">
                  <view
                    @click="goDeatil(1, item)"
                    class="bg-theme rounded-[6rpx] h-8 w-[178rpx] text-center leading-8 text-base text-white"
                    >立即咨询</view
                  >
                </view>
              </view>
            </view>
          </template>
          <view
            class="flex-1 flex justify-center items-center pt-[300rpx]"
            v-else
          >
            <up-empty
              textSize="16"
              textColor="#222222"
              text="暂无数据"
              icon="/static/empty.png"
              width="101"
              height="120"
            >
            </up-empty>
          </view>
        </template>
      </view>
      <up-popup
        :show="show"
        mode="bottom"
        @close="handleCloseModal"
        :round="10"
      >
        <view class="h-[178rpx] w-full p-5 mb-3">
          <view class="flex items-center">
            <view class="flex items-center flex-col justify-center">
              <button
                class="w-10 h-10 rounded-full overflow-hidden"
                open-type="share"
                hover-class="a"
              >
                <image
                  src="@/static/link.png"
                  class="w-10 h-10"
                  @click="handleShare(0)"
                ></image>
              </button>
              <view class="text-black text-xs mt-3">分享链接</view>
            </view>
            <view
              class="flex items-center flex-col justify-center ml-[86rpx]"
              @click="handleShare(1)"
            >
              <image src="@/static/haibao.png" class="w-10 h-10"></image>
              <view class="text-black text-xs mt-3">分享海报</view>
            </view>
          </view>
        </view>
      </up-popup>
      <up-overlay :show="shows">
        <view
          class="fixed px-5 w-full top-[123rpx] z-[99999] flex items-center justify-center flex-col"
        >
          <image
            :src="shareImg"
            class="w-[85%] rounded-[28rpx] mt-[120rpx]"
            mode="widthFix"
          ></image>
          <view class="flex items-center justify-center mt-[52rpx]">
            <view
              @click="handleCloseModal(1)"
              class="w-[152rpx] mr-4 h-8 leading-8 text-white text-base rounded-2xl text-center"
              style="border: 2rpx solid #fbfbfb"
              >关闭</view
            >
            <view
              @click="saveimgtoAlbum"
              class="w-[152rpx] ml-4 h-8 leading-8 text-[#282A2C] text-base bg-[#FFFFFF] rounded-2xl text-center"
              style="border: 2rpx solid #fbfbfb"
              >保存</view
            >
          </view>
        </view>
      </up-overlay>
    </template>
    <view v-else class="w-full flex-1 h-full flex flex-col bg-white">
      <image
        class="w-full"
        mode="widthFix"
        src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/111.jpg"
      ></image>
    </view>
    <customTab value="preference" />
  </view>
</template>

<script setup lang="ts">
import { getCharters_api, getJoins_api, shareCharter_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { useUserStore } from "@/stores/user.js";
import { onShareAppMessage, onShow } from "@dcloudio/uni-app";

const userStore = useUserStore();
const isLogin = computed(() => userStore.isLogin);
const settingInfo = computed(() => userStore.setting);

const list1 = reactive([{ name: "特惠包机" }, { name: "拼机" }]);
const show = ref(false);
const shows = ref(false);
const current = ref(0);

const list = ref([]);
const list2 = ref([]);
const getList = () => {
  uni.showLoading({});
  if (!current.value) {
    getCharters_api()
      .then((res) => {
        list.value = res;
      })
      .finally(() => {
        uni.hideLoading();
      });
  } else {
    getJoins_api()
      .then((res) => {
        list2.value = res;
      })
      .finally(() => {
        uni.hideLoading();
      });
  }
};
onShow(() => {
  getList();
});
const clickTab = (e) => {
  current.value = e.index;
  getList();
};
const goDeatil = (type, item) => {
  if ([1, 2].includes(type) && !isLogin.value)
    return uni.showModal({
      title: "温馨提示",
      content: "请先登录后再操作",
      confirmText: "去登录",
      success: (res) => {
        if (res.confirm) {
          return uni.switchTab({
            url: "/pages/my/my",
          });
        }
      },
    });
  if (type == 2) {
    return uni.navigateTo({
      url: `/pages/preference/coatConsultingPrices?id=${item.id}&startCity=${item.start_city}&endCity=${item.end_city}&start_area_id=${item.start_city_id}&end_area_id=${item.end_city_id}&title=${item.plan_name}`,
    });
  }
  if (type) {
    uni.navigateTo({
      url: `/pages/preference/machinesConsultingPrices?id=${
        item.id
      }&date=${item.start_date_ori.replace(/-/g, "/")}&start=${
        item.start_city
      }&end=${item.end_city}`,
    });
  } else {
    uni.navigateTo({
      url: "/pages/preference/preferenceDetail?id=" + item.id,
    });
  }
};

const hanldeShare = (type, item) => {
  // uni.hideTabBar();
  show.value = true;
  tempId.value = item.id;
};
const handleCloseModal = async (type) => {
  if (type == 1) {
    return (shows.value = false);
  }
  show.value = false;
  await uni.$u.sleep(250);
  // uni.showTabBar();
};

const tempId = ref("");
const shareImg = ref("");
const handleShare = (type) => {
  if (type) {
    uni.showLoading({ title: "正在生成中" });
    shareCharter_api(tempId.value)
      .then(async (res) => {
        show.value = false;
        shows.value = false;
        // await uni.$u.sleep(250);
        // uni.showTabBar();
        shareImg.value = res.share_img;
        shows.value = true;
      })
      .finally(() => {
        uni.hideLoading();
      });
  }
};

const saveimgtoAlbum = () => {
  //图片保存到本地
  uni.getImageInfo({
    src: shareImg.value,
    success: function (res) {
      uni.showLoading();
      uni.saveImageToPhotosAlbum({
        filePath: res.path,
        success: function (data) {
          uni.hideLoading();
          uni.showToast({
            title: "保存成功",
            icon: "success",
            duration: 2000,
          });
        },
        fail: function (err) {
          uni.hideLoading();
          if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            uni.openSetting({
              success(settingdata) {
                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                  uni.showToast({
                    title: "您已授权成功，请重新保存海报",
                    icon: "success",
                    duration: 2000,
                  });
                } else {
                  uni.showToast({
                    title: "尚未授权，无法保存海报",
                    icon: "none",
                    duration: 2000,
                  });
                }
              },
            });
          }
        },
        complete: function (e) {
          console.log("saveImageToPhotosAlbum complete", e);
        },
      });
    },
  });
};

onShareAppMessage((res) => {
  if (res.from == "button") {
    return {
      title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
      path: "/pages/preference/preferenceDetail?id=" + tempId.value,
      imageUrl: settingInfo.value.shareImg,
    };
  }
  return {
    title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
    path: "/pages/preference/preference",
    imageUrl: settingInfo.value.shareImg,
  };
});
</script>

<style lang="scss" scoped>
.bgg {
  background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/baoji-bg.png")
    no-repeat;
  width: 100%;
  height: 376rpx;
  background-size: 100% 100%;
}
.bbb {
  border-bottom: 2rpx solid #eff3f5;
}
.ccc {
  border-bottom: 2rpx dashed #dce4e8;
}
.bb {
  background: transparent;
  border-width: 0 !important;
  padding: 0;
  &::after {
    border-width: 0 !important;
    outline: initial !important;
  }
}
.mr-15 {
  margin-right: 40rpx;
}
.fontz {
  font-size: 20rpx;
}
.imgz {
  width: 44rpx;
  height: 44rpx;
}
.pl-c {
  padding-left: 22rpx;
}
</style>
